<template>
  <div class="ranker">
    <div class="banner">
      <el-image :src="banner_img" />
    </div>
    <div class="container">
      <EntityTypeNav
        :vac-type.sync="form.vacType"
        :level-type.sync="form.levelType"
        style="margin-top:1rem"
      />
      <div class="rank-main">
        <div class="rank-content">
          <TypeNav :vac-type="form.vacType" :entity-type.sync="form.entityType" />
          <div v-loading="loading" class="rank-content-detail">
            <div class="selector-container">
              <RatingCycleSelector
                :raw-date.sync="form.date"
                :rating-type="form.type"
                :rating-types="types"
              />
              <el-select v-model="form.type" style="width:7rem;">
                <el-option
                  v-for="item in types"
                  :key="item.code"
                  :label="item.desc"
                  :value="item.code"
                >
                  <span :style="{'float': 'left','color':item.color}">{{ item.desc }}</span>
                  <span style="float: right; color: #f0f0f0; font-size: 10px">{{ item.code }}</span>
                </el-option>
              </el-select>
              <CompanySelector v-model="form.company" style="width:10rem" />
            </div>
            <RankList
              :loading.sync="loading"
              :query-form="queryForm"
              :level-desc-func="levelDescFunc"
            />
          </div>
        </div>
      </div>
    </div>
    <BiliComment id="7f27df03-bb1e-4a2a-b8cb-04a1039c3d23" />
  </div>
</template>

<script>
import { getRankType } from '@/api/apply/query'
import { parseTime } from '@/utils'
export default {
  name: 'Rank',
  components: {
    BiliComment: () => import('@/components/BiliComment'),
    CompanySelector: () => import('@/components/Company/CompanySelector'),
    RankList: () => import('./RankList'),
    TypeNav: () => import('./TypeNav'),
    EntityTypeNav: () => import('./EntityTypeNav'),
    RatingCycleSelector: () =>
      import('@/views/MemberRate/RatingTypeOption/RatingCycleSelector')
  },
  data: () => ({
    loading: false,
    types: [],
    form: {
      type: 2,
      date: new Date(),
      entityType: null,
      levelType: null,
      vacType: null,
      company: null
    }
  }),
  computed: {
    levelDescFunc() {
      const lev = this.form.levelType
      const vac = this.form.vacType
      if (!lev || !vac) return s => s
      const dict = {
        vac: {
          c: s => `${s}次休假`,
          l: s => `${s}天休假`
        },
        inday: {
          c: s => `${s}次请假`,
          l: s => `${Math.ceil(s / 3600)}小时请假`
        }
      }
      return dict[vac][lev]
    },
    queryForm() {
      const f = this.form
      return {
        date: parseTime(f.date),
        rankType: f.type,
        vacType: f.vacType,
        company: f.company && f.company.code,
        entityType: this.requestEntityType
      }
    },
    requestEntityType() {
      const { entityType, levelType, vacType } = this.form
      return `${vacType}.${entityType}@${levelType}`
    },
    banner_img() {
      const url =
        'file/frompath?path=client-sfvue&filename=applies_rank.png'
      return require('@/utils/website').getWebUrlPath(url)
    },
    currentUser() {
      return this.$store.state.user.userid
    }
  },
  watch: {
    '$store.state.user.companyid': {
      handler(v) {
        this.form.company = {
          code: v
        }
      },
      immediate: true
    }
  },
  mounted() {
    this.load_types()
  },
  methods: {
    load_types() {
      getRankType().then(data => {
        this.types = data.list.map(i => ({
          code: i.id,
          name: i.name,
          desc: i.alias,
          type: i.shortAlias
        }))
        this.form.type =
          this.types &&
          this.types.reduce((prev, cur) => {
            return prev > cur.code ? cur.code : prev
          }, 1e3)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.entry-half,
.selector-container {
  z-index: 1;
  position: absolute;
  right: 0;
  top: 0;
}
.img-contain {
  position: relative;
}

.img-contain:before {
  width: 100%;
  position: absolute;
  content: '';
  display: block;
  background: no-repeat top;
}

.img-contain.rank-1:before {
  top: -50px;
  height: 105px;
  background-image: url(//s1.hdslb.com/bfs/static/blive/blfe-live-spa/static/img/first.39f7245.png);
}

.img-contain.rank-2:before {
  top: -28px;
  height: 75px;
  background-image: url();
}

.img-contain img {
  width: 104px;
  height: 104px;
}

.rank-content-detail {
  font-size: 14px;
}

.rank-content-detail .status {
  width: 31px;
  height: 14px;
  line-height: 14px;
  text-align: center;
  font-size: 12px;
  margin: 0 auto;
}

.rank-content-detail .status,
.rank-content-detail .status.user {
  border: 1px solid #61c05a;
  color: #61c05a;
}

.rank-content-detail .status.master {
  border: 1px solid #969696;
  color: #969696;
}

.rank-content-detail .href-enable .content-detail h3,
.rank-content-detail .href-enable .img {
  cursor: pointer;
}

.container {
  position: relative;
  top: -20px;
}

.rank-main {
  width: 1160px;
  margin: 0 auto;
  padding: 33px 0;
}

#comment {
  width: 1160px;
  margin-top: 100px;
}

.banner {
  font-size: 0;
  img {
    width: 100%;
  }
}

.rank-content {
  overflow: hidden;
}
.rank-content-detail {
  position: relative;
  overflow: hidden;
  margin-left: 296px;
}
</style>
